<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
  <link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet" />
  <!-- bootstrap-table 表格插件样式 -->
  <link href="ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.22.6" rel="stylesheet" />
  <link href="css/animate.min.css?v=20210831" rel="stylesheet" />
  <link href="css/style.min.css?v=20210831" rel="stylesheet" />
  <link href="ruoyi/css/ry-ui.css?v=4.8.0" rel="stylesheet" />

  <script src="js/jquery.min.js?v=3.6.3"></script>
  <script src="js/bootstrap.min.js?v=3.3.7"></script>
  <!-- bootstrap-table 表格插件 -->
  <script src="ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.22.6"></script>
  <!-- jquery-validate 表单验证插件 -->
  <script src="ajax/libs/validate/jquery.validate.min.js?v=1.21.0"></script>
  <script src="ajax/libs/validate/jquery.validate.extend.js?v=1.21.0"></script>
  <script src="ajax/libs/validate/messages_zh.js?v=1.21.0"></script>
  <!-- bootstrap-table 表格树插件 -->
  <script src="ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.22.6"></script>
  <!-- 遮罩层 -->
  <script src="ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
  <script src="ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
  <script src="ajax/libs/layer/layer.min.js?v=3.7.0"></script>
  <script src="ajax/libs/layui/layui.min.js?v=2.8.18"></script>
  <script src="ruoyi/js/common.js?v=4.8.0"></script>
  <script src="ruoyi/js/ry-ui.js?v=4.8.0"></script>
</head>
<body class="gray-bg">
  <div class="app-container">
    <img src="img/control/control-bg.png" class="bg-img" id="bgImg"/>
    <div class="monitor-wrapper" id="monitor-wrapper">
      <div class="monitor-wrapper-left-wrapper">
        <div class="control-flex" style="width: 100%;">
          <div class="left-container" style="width: 30%;">
            <div class="monitor-wrapper-left">
              <div class="control-title">
                <img src="img/control/control-title.png" class="control-title-bg"/>
                <div class="control-title-desc">上料工位</div>
              </div>
              <div class="control-header-left-content">
                <div>龙门吊当前工作状态</div>
                <div style="font-weight: 600;
                font-size: 2.6rem;
                color: #FA6400;" id="loading-status">空载</div>
                <div class="control-flex" style="margin-bottom: 1.8rem;">
                  <div style="margin-top: 0.5rem;margin-right: 2.6rem;">
                    <div>当天吊运工件数</div>
                    <div class="control-header-num" id="control-header-num-count">0</div>
                  </div>
                  <div style="margin-top: 0.5rem;">
                    <div>真空吸盘工作数</div>
                    <div class="control-header-num" id="control-header-num-vacuum">0</div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" style="width: 100%; height: 100%;"/>
                  <div class="desc">
                    <div>x轴运行状态</div>
                    <div class="status" id="x_status">正常</div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" style="width: 100%; height: 100%;"/>
                  <div class="desc">
                    <div>y轴运行状态</div>
                    <div class="status" id="Y_status">正常</div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" style="width: 100%; height: 100%;"/>
                  <div class="desc">
                    <div>z轴运行状态</div>
                    <div class="status" id="Z_status">正常</div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" style="width: 100%; height: 100%;"/>
                  <div class="desc">
                    <div>吸盘工作状态</div>
                    <div class="status" id="vaccum_status">正常</div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" style="width: 100%; height: 100%;"/>
                  <div class="desc">
                    <div>真空吸盘真空度</div>
                    <div class="status" id="empty_status">正常</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-container" style="width: 70%;padding-top: 8rem;">
            <div class="structure">
              <img src="img/control/machine.png" style="transform: rotateX(-30deg);"/>
              <div id="upload-wrapper">
                <!-- 上料 -->
                <div id="alarm_z" class="alert-wrapper" style="left: 5%; top: 20%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">异常报警</div>
                      <div class="desc-text">z轴异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="alarm_x" class="alert-wrapper" style="left: 2%; top: 75%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">异常报警</div>
                      <div class="desc-text">x轴异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="alarm_y" class="alert-wrapper" style="left: 20%; bottom: 0;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">异常报警</div>
                      <div class="desc-text">y轴异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="sucker_alarm" class="alert-wrapper" style="left: 10%; bottom: -10%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">异常报警</div>
                      <div class="desc-text">吸盘工作异常</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="vacuum_low_alarm" class="alert-wrapper" style="left: 0; top: 45%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">异常报警</div>
                      <div class="desc-text">真空吸盘真空度过低</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
              </div>
              <!-- 清洗 -->
              <div id="cleaning-wrapper">
                <div id="laser" class="alert-wrapper" style="left: 10%; top: 50%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">报警</div>
                      <div class="desc-text">喷墨划线异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="dust" class="alert-wrapper" style="left: 30%; top: 55%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">报警</div>
                      <div class="desc-text">浮动打磨异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <!-- 物流线 -->
                <div id="transport-wrapper">
                  <div id="inverter" class="alert-wrapper" style="left: 30%; top: 33%;">
                    <div class="clean-alert-wrapper">
                      <img src="img/loading/alert-bg.png"/>
                      <div class="clean-alert-wrapper-desc">
                        <div class="desc">报警</div>
                        <div class="desc-text">变频器数量：<span id="inverter_num">3</span>个</div>
                      </div>
                    </div>
                    <img src="img/loading/alert.png" class="clean_alert" />
                  </div>
                  <div id="servo_motor" class="alert-wrapper" style="right: 0%; top: 0%;">
                    <div class="clean-alert-wrapper">
                      <img src="img/loading/alert-bg.png"/>
                      <div class="clean-alert-wrapper-desc">
                        <div class="desc">伺服电机报警</div>
                        <div class="desc-text">伺服电机数量：<span id="servo_motor_num"></span>个</div>
                      </div>
                    </div>
                    <img src="img/loading/alert.png" class="clean_alert" />
                  </div>
                </div>
              </div>
              <!-- 摩擦焊 -->
              <div id="frictionWelding-wrapper">
                <div id="press_plate_alarm" class="alert-wrapper" style="left: 20%; top: 15%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">压板报警</div>
                      <div class="desc-text">异常压板数量：<span id="press_plate_alarm_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="logistics_line_status" class="alert-wrapper" style="left: 13%; top: 22%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">无料</div>
                      <div class="desc-text">物流线数量：<span id="logistics_line_status_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="hs_liquid_levell_alarm" class="alert-wrapper" style="left: 30%; top: 12%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc" style="margin-top: 2rem;">液压站液位异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="side_positioning_alarm" class="alert-wrapper" style="left: 40%; top: 13%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">侧向定位报警报警</div>
                      <div class="desc-text">异常侧向定位数量：<span id="side_positioning_alarm_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="main_spindle_alarm" class="alert-wrapper" style="left: 40%; top: 65%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">主机轴报警</div>
                      <div class="desc-text">异常主机轴数量：<span id="main_spindle_alarm_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="tool_cooler_alarm" class="alert-wrapper" style="left: 55%; top: 10%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">报警</div>
                      <div class="desc-text">刀具水冷机异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="tool_change_alarm" class="alert-wrapper" style="left: 40%; top: 30%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">换刀报警</div>
                      <div class="desc-text">异常换刀数量：<span id="tool_change_alarm_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="spindle_cooler_alarm" class="alert-wrapper" style="left: 50%; top: 40%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">报警</div>
                      <div class="desc-text">主轴水冷机异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="hs_temperature_alarm" class="alert-wrapper" style="left: 50%; top: 70%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc" style="margin-top: 2rem;">液压站温度异常报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="side_push_alarm" class="alert-wrapper" style="right: 20%; top: 10%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">侧推报警</div>
                      <div class="desc-text">异常侧推数量：<span id="side_push_alarm_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="servo_cart_alarm" class="alert-wrapper" style="right: 25%; top: 15%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">小车报警</div>
                      <div class="desc-text">异常小车数量：<span id="servo_cart_alarm_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="lifting_pad_alarm" class="alert-wrapper" style="right: 20%; top: 30%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">升降垫片报警</div>
                      <div class="desc-text">异常升降垫板数量：<span id="lifting_pad_alarm_num"></span>个</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="cnc_alarm" class="alert-wrapper" style="right: 0%; top: 12%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc" style="margin-top: 2rem;">数控系统报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
              </div>
              <!-- 检测 -->
              <div id="test-wrapper" class="alert-wrapper" style="right: 10%; top: 12%;">
                <div class="clean-alert-wrapper">
                  <img src="img/loading/alert-bg.png"/>
                  <div class="clean-alert-wrapper-desc">
                    <div class="desc" style="margin-top: 2rem;">射线检测报警信息</div>
                  </div>
                </div>
                <img src="img/loading/alert.png" class="clean_alert" />
              </div>
              <!-- 下料 -->
              <div id="cutting-wrapper">
                <div id="rgv_low_liquid_level_alarm" class="alert-wrapper" style="right: 25%; bottom: 5%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc">小车低液位报警</div>
                      <div class="desc-text">报警编号：<span id="rgv_low_liquid_level_alarm_no"></span></div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="emergency_stop_info" class="alert-wrapper" style="right: 13%; bottom: 8%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc" style="margin-top: 2rem;">急停信息</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="rgv_obstacle_avoidance_alarm" class="alert-wrapper" style="right: 5%; bottom: 6%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc" style="margin-top: 2rem;">避障报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="charging_pile_alarm" class="alert-wrapper" style="right: -3%; bottom: 9%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc" style="margin-top: 2rem;">充电桩报警</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
                <div id="rgv_alarm_info" class="alert-wrapper" style="right: 7%; bottom: 32%;">
                  <div class="clean-alert-wrapper">
                    <img src="img/loading/alert-bg.png"/>
                    <div class="clean-alert-wrapper-desc">
                      <div class="desc" style="margin-top: 2rem;">小车报警信息</div>
                    </div>
                  </div>
                  <img src="img/loading/alert.png" class="clean_alert" />
                </div>
              </div>
            </div>
            <div class="box-container">
              <img src="img/control/box.png" class="box-item"/>
              <img src="img/control/box.png" class="box-item"/>
              <img src="img/control/box.png" class="box-item"/>
              <img src="img/control/box.png" class="box-item"/>
            </div>
          </div>
        </div>
        <div class="control-bottom control-flex">
          <div class="control-bottom-left" style="width: 63%;margin-right: 10px;">
            <div class="control-title" style="width: 60%;">
              <img src="img/control/control-title.png" class="control-title-bg"/>
              <div class="control-title-desc">清洗工位</div>
            </div>
            <div class="control-bottom-left-container control-flex">
              <div style="width: 58%;">
                <div class="control-flex" style="align-items: center; margin-bottom: 1.5rem;">
                  <img src="img/control/icon.jpg" style="width: 2rem; height: 2rem;"/>
                  <div class="header-title">喷墨划线</div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/control/control-bg-ex.png" id="laser_status_img"/>
                  <div class="desc">
                    <div>激光器状态</div>
                    <div id="laser_status"></div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" id="laser_cooler_temperature_img"/>
                  <div class="desc">
                    <div>激光水冷器温度状态</div>
                    <div id="laser_cooler_temperature"></div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" id="laser_smoke_img"/>
                  <div class="desc">
                    <div>激光烟雾吸尘器工作状态</div>
                    <div id="laser_smoke"></div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" id="inkjet_marking_status_img"/>
                  <div class="desc">
                    <div>喷墨划线工作状态</div>
                    <div id="inkjet_marking_status"></div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" id="board_vision_recognition_status_img"/>
                  <div class="desc">
                    <div>板料视觉边轮廓识别装置工作状态</div>
                    <div id="board_vision_recognition_status"></div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <div class="desc">
                    <div>板料视觉边轮廓识别装置是否修正</div>
                    <div class="status">
                      <img src="img/control/checkbox.jpg" style="width: 2rem" id="board_vision_correction"/>
                    </div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <div class="desc">
                    <div>激光清洗板料计数</div>
                    <div id="laser_cleaning_count">0</div>
                  </div>
                </div>
              </div>
              <div style="width: 40%;margin-left: 2%;">
                <div class="control-flex" style="align-items: center; margin-bottom: 1.5rem;">
                  <img src="img/control/icon.jpg" style="width: 2rem; height: 2rem;"/>
                  <div class="header-title">浮动打磨</div>
                </div>
                <div class="common">打磨片当前使用寿命</div>
                <div class="control-flex usage-wrapper common" style="align-items: center;margin-bottom: 10px;">
                  <div class="usage-container">
                    <div class="usaged"></div>
                  </div>
                  <div id="grinding_disc_current_lifetime">12/24M</div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/loading/empty-bg.png" id="wet_dust_collector_status_img"/>
                  <div class="desc">
                    <div>湿式除尘器工作状态</div>
                    <div id="wet_dust_collector_status"></div>
                  </div>
                </div>
                <div class="control-flex" style="align-items: center; margin-bottom: 1.5rem;">
                  <img src="img/control/icon.jpg" style="width: 2rem; height: 2rem;"/>
                  <div class="header-title">物流线</div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/control/control-bg-ex.png" id="inverter_img"/>
                  <div class="desc">
                    <div>变频器</div>
                    <div id="inverter"></div>
                  </div>
                </div>
                <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                  <img src="img/control/control-bg-ex.png" id="servo_motor_img"/>
                  <div class="desc">
                    <div>伺服电机</div>
                    <div id="servo_motor"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="control-bottom-right" style="width: 47%;">
            <div class="control-title" style="width: 80%;">
              <img src="img/control/control-title.png" class="control-title-bg"/>
              <div class="control-title-desc">摩擦焊工位</div>
            </div>
            <div class="control-bottom-left-container" style="padding-bottom: 0;">
              <div id="control-bottom-left-container">
                <div class="desc-item control-flex space-between">
                  <div class="control-flex" style="margin-right:5px;">
                    <div>上机头定位焊刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="upper_pos_weld_tool_life"></span>M</div>
                  </div>
                  <div class="control-flex">
                    <div>上机头正式焊刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="upper_final_weld_tool_life"></span>M</div>
                  </div>
                </div>
                <div class="desc-item control-flex space-between">
                  <div class="control-flex" style="margin-right:5px;">
                    <div>上机头铣削铣边刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="upper_mill_edge_tool_life"></span>M</div>
                  </div>
                  <div class="control-flex">
                    <div>上机头铣削铣焊缝飞边刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="upper_mill_seam_tool_life"></span>M</div>
                  </div>
                </div>
                <div class="desc-item control-flex space-between">
                  <div class="control-flex" style="margin-right:5px;">
                    <div>下机头定位焊刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="lower_pos_weld_tool_life"></span>M</div>
                  </div>
                  <div class="control-flex">
                    <div>下机头正式焊刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="lower_final_weld_tool_life"></span>M</div>
                  </div>
                </div>
                <div class="desc-item control-flex space-between">
                  <div class="control-flex" style="margin-right:5px;">
                    <div>下机头铣削铣边刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="lower_mill_edge_tool_life"></span>M</div>
                  </div>
                  <div class="control-flex">
                    <div>下机头铣削铣焊缝飞边刀具寿命</div>
                    <div style="margin-left: 5px;"><span id="lower_mill_seam_tool_life"></span>M</div>
                  </div>
                </div>
              </div>
              <div class="control-flex" style="align-items: center; margin-bottom: 1.5rem;">
                <img src="img/control/icon.jpg" style="width: 2rem; height: 2rem;"/>
                <div class="header-title">FSW设备</div>
              </div>
              <div class="control-flex">
                <div style="width: 38%;margin-right: 2%">
                  <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                    <img src="img/control/control-bg-ex.png" id="water_cool_1_status_img"/>
                    <div class="desc">
                      <div>水冷机1号</div>
                      <div id="water_cool_1_status"></div>
                    </div>
                  </div>
                  <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                    <img src="img/control/control-bg-ex.png" id="water_cool_2_status_img"/>
                    <div class="desc">
                      <div>水冷机2号</div>
                      <div id="water_cool_2_status"></div>
                    </div>
                  </div>
                  <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                    <img src="img/loading/empty-bg.png" id="water_cool_3_status_img"/>
                    <div class="desc">
                      <div>水冷机3号</div>
                      <div id="water_cool_3_status"></div>
                    </div>
                  </div>
                </div>
                <div style="width: 60%;">
                  <div class="control-flex space-between temperatrue">
                    <div>FSW焊接板料计数 <div class="num" id="fsw_plate_count">99</div></div>
                    <div>液压站温度<div class="num" style="color: #DC5D0B;" id="hydraulic_temp">69℃</div></div>
                    <div>液压站液位<div class="num" id="hydraulic_level">58.66</div></div>
                  </div>
                  <div class="control-flex">
                    <div class="control-loading-status" style="width: 100%; height: 4.5rem;margin-right: 10px;">
                      <img src="img/control/control-bg-ex.png" id="lifting_pad_alarm_img"/>
                      <div class="desc" style="padding: 0 1rem;">
                        <div>升降垫板报警</div>
                      </div>
                    </div>
                    <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                      <img src="img/control/control-bg-ex.png" style="width: 100%; height: 100%;" id="main_spindle_alarm_img"/>
                      <div class="desc" style="padding: 0 1rem;">
                        <div>主机轴报警</div>
                      </div>
                    </div>
                  </div>
                  <div class="control-flex">
                    <div class="control-loading-status" style="width: 100%; height: 4.5rem;margin-right: 10px;">
                      <img src="img/control/control-bg-ex.png" id="side_positioning_alarm_img"/>
                      <div class="desc" style="padding: 0 1rem;">
                        <div>侧向定位报警</div>
                      </div>
                    </div>
                    <div class="control-loading-status" style="width: 100%; height: 4.5rem;">
                      <img src="img/control/control-bg-ex.png" id="side_push_alarm_img"/>
                      <div class="desc" style="padding: 0 1rem;">
                        <div>侧推报警</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="monitor-wrapper-right-wrapper" style="width: 20%;position: relative;margin-left: 1%;">
        <div class="control-title">
          <img src="img/control/control-title.png" class="control-title-bg"/>
          <div class="control-title-desc">检测工位</div>
        </div>
        <div class="control-bottom-left-container test">
          <div>X射线机铅罩外部辐射计量</div>
          <div class="num" id="xray_machine_external_radiation">99</div>
          <div>移动成像板铅罩外部辐射计量</div>
          <div class="num" id="imaging_board_external_radiation">99</div>
          <div class="desc-item">
            <div class="control-flex space-between">
              <div>X射线机位置上Y</div>
              <div style="margin-left: 5px;"><span id="xray_machine_position_upper_y"></span>m</div>
            </div>
          </div>
          <div class="desc-item">
            <div class="control-flex space-between">
              <div>X射线机位置下Y</div>
              <div style="margin-left: 5px;"><span id="xray_machine_position_lower_y"></span>m</div>
            </div>
          </div>
          <div class="desc-item">
            <div class="control-flex space-between">
              <div>X射线机位置上Z</div>
              <div style="margin-left: 5px;"><span id="xray_machine_position_upper_z"></span>m</div>
            </div>
          </div>
          <div class="desc-item">
            <div class="control-flex space-between">
              <div>X射线机位置下Z</div>
              <div style="margin-left: 5px;"><span id="xray_machine_position_lower_z"></span>m</div>
            </div>
          </div>
          <div class="control-flex space-between">
            <div style="width: 48%;" style="margin-right: 2%;"><div class="test-speed">X射线机移动速度</div><div class="total-num"><span id="xray_machine_moving_speed"></span>m</div></div>
            <div style="width: 50%;"><div class="test-speed">移动成像板移动速度</div><div class="total-num"><span id="imaging_board_moving_speed"></span>m</div></div>
          </div>
          <div class="control-loading-status" style="width: 100%; height: 4.5rem;margin-top: 10px;">
            <img src="img/loading/empty-bg.png" id="radiation_detection_alarm_img"/>
            <div class="desc">
              <div style="margin: 0 auto;">射线检测<span id="radiation_detection_alarm">正常</span></div>
            </div>
          </div>
        </div>
        <div class="control-title" style="margin: 10px 0;">
          <img src="img/control/control-title.png" class="control-title-bg"/>
          <div class="control-title-desc">下料工位</div>
        </div>
        <div class="control-bottom-left-container" style="padding-bottom: 0.1rem;">
          <div class="control-flex space-between xialiao-desc" style="align-items: center;">
            <div>当前联动小车数量</div>
            <div style="color: #45EED1;font-size: 2.6rem;" id="car_num">4</div>
          </div>
          <div class="table-wrapper">
            <div class="control-flex space-between">
              <div>编号</div>
              <div>工作状态</div>
              <div>充电桩状态</div>
            </div>
            <div id="table-item-wrapper"></div>
          </div>
          <div class="control-loading-status" style="width: 100%; height: 4.5rem;margin-top: 10px;">
            <img src="img/control/control-bg-ex.png" id="cutting_rgv_low_liquid_level_alarm_img"/>
            <div class="desc">
              <div>小车低液位</div>
              <div id="cutting_rgv_low_liquid_level_alarm"></div>
            </div>
          </div>
          <div class="control-loading-status" style="width: 100%; height: 4.5rem;margin-top: 10px;">
            <img src="img/control/control-bg-ex.png" id="cutting_emergency_stop_info_img"/>
            <div class="desc">
              <div>急停信息</div>
              <div id="cutting_emergency_stop_info"></div>
            </div>
          </div>
        </div>
        <!-- 报警信息 -->
        <div class="tip-wrapper" style="width: 42px; height :40px; position: absolute; top: 0;
        right: 0;">
          <img src="img/loading/tip.png" class="tip" id="tip" style="width: 100%; height :100%;"/>
          <div class="tip-wrapper-list" id="tip-wrapper-list" style="display: none;">
            <img src="img/loading/tip-header.png" style="width: 100%; height: 80px;"/>
            <div id="loadingAlert-wrapper">
            </div>
            <div id="cleaningAlert-wrapper" style="margin-top: 20px;">
            </div>
            <div id="frictionAlert-wrapper" style="margin-top: 20px;">
            </div>
            <div id="testAlert-wrapper" style="margin-top: 20px;">
            </div>
            <div id="cuttingAlert-wrapper" style="margin-top: 20px;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script th:inline="javascript">
    $(document).ready(function(){
      window.addEventListener('resize',function(){
        window.location.reload()
      })
    })
    
    let loadingAlertStr = JSON.parse('{"loadingAlarms":[{"component":0,"alarmType":0,"deviceSn":0},{"component":0,"alarmType":1,"deviceSn":0},{"component":0,"alarmType":2,"deviceSn":0},{"component":1,"alarmType":3,"deviceSn":0},{"component":1,"alarmType":4,"deviceSn":0}],"updateTime":1742806730444}')
    let cleaningAlertStr = JSON.parse('{"loadingAlarms":[{"component":0,"alarmType":0,"deviceSn":0},{"component":0,"alarmType":1,"deviceSn":0},{"component":0,"alarmType":2,"deviceSn":0},{"component":1,"alarmType":3,"deviceSn":0},{"component":1,"alarmType":4,"deviceSn":0}],"updateTime":1742808012066}')
    let frictionWeldingAlertStr = JSON.parse('{"weldingAlarms":[{"component":0,"alarmType":0,"deviceSn":1},{"component":0,"alarmType":1,"deviceSn":1},{"component":0,"alarmType":2,"deviceSn":1},{"component":0,"alarmType":2,"deviceSn":2},{"component":0,"alarmType":2,"deviceSn":3},{"component":0,"alarmType":2,"deviceSn":4},{"component":0,"alarmType":2,"deviceSn":5},{"component":0,"alarmType":2,"deviceSn":6},{"component":0,"alarmType":2,"deviceSn":7},{"component":0,"alarmType":2,"deviceSn":8},{"component":0,"alarmType":2,"deviceSn":9},{"component":0,"alarmType":2,"deviceSn":10},{"component":0,"alarmType":2,"deviceSn":11},{"component":0,"alarmType":2,"deviceSn":12},{"component":0,"alarmType":2,"deviceSn":13},{"component":0,"alarmType":2,"deviceSn":14},{"component":0,"alarmType":2,"deviceSn":15},{"component":0,"alarmType":2,"deviceSn":16},{"component":0,"alarmType":2,"deviceSn":17},{"component":0,"alarmType":2,"deviceSn":18},{"component":0,"alarmType":2,"deviceSn":19},{"component":0,"alarmType":2,"deviceSn":20},{"component":0,"alarmType":2,"deviceSn":21},{"component":0,"alarmType":2,"deviceSn":22},{"component":0,"alarmType":2,"deviceSn":23},{"component":0,"alarmType":2,"deviceSn":24},{"component":0,"alarmType":2,"deviceSn":25},{"component":0,"alarmType":2,"deviceSn":26},{"component":0,"alarmType":2,"deviceSn":27},{"component":0,"alarmType":2,"deviceSn":28},{"component":0,"alarmType":2,"deviceSn":29},{"component":0,"alarmType":2,"deviceSn":30},{"component":0,"alarmType":3,"deviceSn":1},{"component":0,"alarmType":3,"deviceSn":2},{"component":0,"alarmType":3,"deviceSn":3},{"component":0,"alarmType":3,"deviceSn":4},{"component":0,"alarmType":3,"deviceSn":5},{"component":0,"alarmType":3,"deviceSn":6},{"component":0,"alarmType":3,"deviceSn":7},{"component":0,"alarmType":3,"deviceSn":8},{"component":0,"alarmType":3,"deviceSn":9},{"component":0,"alarmType":3,"deviceSn":10},{"component":0,"alarmType":3,"deviceSn":11},{"component":0,"alarmType":3,"deviceSn":12},{"component":0,"alarmType":3,"deviceSn":13},{"component":0,"alarmType":3,"deviceSn":14},{"component":0,"alarmType":3,"deviceSn":15},{"component":0,"alarmType":3,"deviceSn":16},{"component":0,"alarmType":3,"deviceSn":17},{"component":0,"alarmType":3,"deviceSn":18},{"component":0,"alarmType":3,"deviceSn":19},{"component":0,"alarmType":3,"deviceSn":20},{"component":0,"alarmType":3,"deviceSn":21},{"component":0,"alarmType":3,"deviceSn":22},{"component":0,"alarmType":3,"deviceSn":23},{"component":0,"alarmType":3,"deviceSn":24},{"component":0,"alarmType":3,"deviceSn":25},{"component":0,"alarmType":3,"deviceSn":26},{"component":0,"alarmType":3,"deviceSn":27},{"component":0,"alarmType":3,"deviceSn":28},{"component":0,"alarmType":3,"deviceSn":29},{"component":0,"alarmType":3,"deviceSn":30},{"component":0,"alarmType":3,"deviceSn":31},{"component":0,"alarmType":3,"deviceSn":32},{"component":0,"alarmType":3,"deviceSn":33},{"component":0,"alarmType":3,"deviceSn":34},{"component":0,"alarmType":3,"deviceSn":35},{"component":0,"alarmType":3,"deviceSn":36},{"component":0,"alarmType":3,"deviceSn":37},{"component":0,"alarmType":3,"deviceSn":38},{"component":0,"alarmType":3,"deviceSn":39},{"component":0,"alarmType":3,"deviceSn":40},{"component":0,"alarmType":3,"deviceSn":41},{"component":0,"alarmType":3,"deviceSn":42},{"component":0,"alarmType":3,"deviceSn":43},{"component":0,"alarmType":3,"deviceSn":44},{"component":0,"alarmType":3,"deviceSn":45},{"component":0,"alarmType":3,"deviceSn":46},{"component":0,"alarmType":3,"deviceSn":47},{"component":0,"alarmType":3,"deviceSn":48},{"component":0,"alarmType":3,"deviceSn":49},{"component":0,"alarmType":3,"deviceSn":50},{"component":0,"alarmType":3,"deviceSn":51},{"component":0,"alarmType":3,"deviceSn":52},{"component":0,"alarmType":3,"deviceSn":53},{"component":0,"alarmType":3,"deviceSn":54},{"component":0,"alarmType":3,"deviceSn":55},{"component":0,"alarmType":3,"deviceSn":56},{"component":0,"alarmType":3,"deviceSn":57},{"component":0,"alarmType":3,"deviceSn":58},{"component":0,"alarmType":3,"deviceSn":59},{"component":0,"alarmType":3,"deviceSn":60},{"component":0,"alarmType":4,"deviceSn":1},{"component":0,"alarmType":4,"deviceSn":2},{"component":0,"alarmType":4,"deviceSn":3},{"component":0,"alarmType":4,"deviceSn":4},{"component":0,"alarmType":4,"deviceSn":5},{"component":0,"alarmType":4,"deviceSn":6},{"component":0,"alarmType":4,"deviceSn":7},{"component":0,"alarmType":4,"deviceSn":8},{"component":0,"alarmType":4,"deviceSn":9},{"component":0,"alarmType":4,"deviceSn":10},{"component":0,"alarmType":4,"deviceSn":11},{"component":0,"alarmType":4,"deviceSn":12},{"component":0,"alarmType":4,"deviceSn":13},{"component":0,"alarmType":4,"deviceSn":14},{"component":0,"alarmType":4,"deviceSn":15},{"component":0,"alarmType":4,"deviceSn":16},{"component":0,"alarmType":4,"deviceSn":17},{"component":0,"alarmType":4,"deviceSn":18},{"component":0,"alarmType":4,"deviceSn":19},{"component":0,"alarmType":4,"deviceSn":20},{"component":0,"alarmType":4,"deviceSn":21},{"component":0,"alarmType":4,"deviceSn":22},{"component":0,"alarmType":4,"deviceSn":23},{"component":0,"alarmType":4,"deviceSn":24},{"component":0,"alarmType":4,"deviceSn":25},{"component":0,"alarmType":4,"deviceSn":26},{"component":0,"alarmType":4,"deviceSn":27},{"component":0,"alarmType":4,"deviceSn":28},{"component":0,"alarmType":5,"deviceSn":1},{"component":0,"alarmType":5,"deviceSn":2},{"component":0,"alarmType":5,"deviceSn":3},{"component":0,"alarmType":5,"deviceSn":4},{"component":0,"alarmType":5,"deviceSn":5},{"component":0,"alarmType":5,"deviceSn":6},{"component":0,"alarmType":5,"deviceSn":7},{"component":0,"alarmType":5,"deviceSn":8},{"component":0,"alarmType":6,"deviceSn":1},{"component":0,"alarmType":6,"deviceSn":2},{"component":0,"alarmType":7,"deviceSn":1},{"component":0,"alarmType":7,"deviceSn":2},{"component":0,"alarmType":8,"deviceSn":1},{"component":0,"alarmType":8,"deviceSn":2},{"component":0,"alarmType":8,"deviceSn":3},{"component":0,"alarmType":8,"deviceSn":4},{"component":0,"alarmType":8,"deviceSn":5},{"component":0,"alarmType":8,"deviceSn":6},{"component":0,"alarmType":8,"deviceSn":7},{"component":0,"alarmType":8,"deviceSn":8},{"component":0,"alarmType":8,"deviceSn":9},{"component":0,"alarmType":8,"deviceSn":10},{"component":0,"alarmType":8,"deviceSn":11},{"component":0,"alarmType":8,"deviceSn":12},{"component":0,"alarmType":8,"deviceSn":13},{"component":0,"alarmType":8,"deviceSn":14},{"component":0,"alarmType":8,"deviceSn":15},{"component":0,"alarmType":8,"deviceSn":16},{"component":0,"alarmType":8,"deviceSn":17},{"component":0,"alarmType":8,"deviceSn":18},{"component":0,"alarmType":8,"deviceSn":19},{"component":0,"alarmType":8,"deviceSn":20},{"component":0,"alarmType":8,"deviceSn":21},{"component":0,"alarmType":9,"deviceSn":1},{"component":0,"alarmType":10,"deviceSn":1},{"component":0,"alarmType":10,"deviceSn":1}],"updateTime":1742808518337}')
    let testAlertStr = JSON.parse('{"testingAlarms":[{"component":0,"alarmType":0,"deviceSn":1}],"updateTime":1742808856543}')
    let cuttingAlertStr = JSON.parse('{"updateTime":1742808989155,"unloadingAlarms":[{"component":0,"alarmType":1,"deviceSn":1},{"component":0,"alarmType":1,"deviceSn":2},{"component":0,"alarmType":1,"deviceSn":3},{"component":0,"alarmType":1,"deviceSn":4},{"component":0,"alarmType":2,"deviceSn":1},{"component":0,"alarmType":2,"deviceSn":2},{"component":0,"alarmType":2,"deviceSn":3},{"component":0,"alarmType":2,"deviceSn":4},{"component":0,"alarmType":3,"deviceSn":1},{"component":0,"alarmType":3,"deviceSn":2},{"component":0,"alarmType":3,"deviceSn":3},{"component":0,"alarmType":3,"deviceSn":4},{"component":0,"alarmType":4,"deviceSn":1},{"component":0,"alarmType":5,"deviceSn":1},{"component":0,"alarmType":5,"deviceSn":2},{"component":0,"alarmType":5,"deviceSn":3},{"component":0,"alarmType":5,"deviceSn":4}]}')
    
    const height = window.innerHeight;
    $('#bgImg').height(height)

    // 弹框
    $('#tip').click(function(e){
      e.stopPropagation()  //阻止事件冒泡
      $('#tip-wrapper-list').css('display','block');
    })
    $('#monitor-wrapper').click(function(){
      $('#tip-wrapper-list').css('display','none');
    })
    // 上料工位
    loadingInfo()
    function loadingInfo(){
      let resStatusStr = JSON.parse('{"loadingStatus":{"positionX":153.9684,"positionY":153.9684,"positionZ":153.9684,"speedX":153.9684,"speedY":153.9684,"speedZ":153.9684,"workplaceStatus":76,"hoistCount":76,"vacuumPressure":153.9684,"vacuumStatus":76},"updateTime":1742806730447}');
      $('#control-header-num-count').text(resStatusStr.loadingStatus.hoistCount)   //吊运工作数
      $('#control-header-num-vacuum').text(resStatusStr.loadingStatus.vacuumStatus)   //真空吸盘工作数
      $('#x_status').text(resStatusStr.loadingStatus.positionX + '/'+ resStatusStr.loadingStatus.speedX)
      $('#Y_status').text(resStatusStr.loadingStatus.positionY + '/'+ resStatusStr.loadingStatus.speedY)
      $('#Z_status').text(resStatusStr.loadingStatus.positionZ+ '/'+ resStatusStr.loadingStatus.speedZ)
      $('#vacuum_status').text(resStatusStr.loadingStatus.suckerAlarm)  // 吸盘工作状态
      $('#empty_status').text(resStatusStr.loadingStatus.vacuumPressure)
      $('#loading_status').text(resStatusStr.loadingStatus.workpieceStatus == 0 ? '空载' : '带载')
    }

    // 清洗工位
    getCleaningInfo()
    function getCleaningInfo(){
      let cleaningStatusStr = JSON.parse('{"cleaningStatus":{"laserCleaningHeadX":153.9684,"laserCleaningHeadY":153.9684,"laserCleaningHeadZ":153.9684,"laserCleaningHeadC":153.9684,"laserCleaningFeedSpeed":153.9684,"laserCleaningWidth":153.9684,"inkjetMarkingWidth":153.9684,"inkCartridgeLifetime":76,"laserPower":153.9684,"laserStatus":76,"laserCoolerTemperature":76,"laserSmokeExtractorStatus":76,"inkjetMarkingStatus":76,"boardVisionRecognitionStatus":76,"boardVisionCorrection":76,"laserCleaningCount":76,"grindingSpindleSpeed":153.9684,"grindingHeadY":153.9684,"grindingHeadZ":153.9684,"grindingHeadC":153.9684,"grindingDiscCurrentLifetime":153,"grindingDiscSetLifetime":76,"grindingDiscNewCount":76,"grindingDiscOldCount":76,"wetDustCollectorStatus":76},"updateTime":1742808005986}')
      // 激光器状态
      let laserStatus = cleaningStatusStr.cleaningStatus.laserStatus
      $('#laser_status').html(`<div class="`+ (laserStatus == 0 ? 'status' : 'exception' )+ `">`+ (laserStatus == 0 ? '正常' : '异常') + `</div>`)
      if(laserStatus == 0){
        $('#laser_status_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#laser_status_img').attr('src','img/control/control-bg-ex.png')
      }
      // 激光水冷器温度状态
      let laserCoolerTemperature = cleaningStatusStr.cleaningStatus.laserCoolerTemperature
      $('#laser_cooler_temperature').html(`<div class="`+ (laserCoolerTemperature == 0 ? 'status' : 'exception' )+ `">`+ (laserCoolerTemperature == 0 ? '正常' : '异常') + `</div>`)
      if(laserCoolerTemperature == 0){
        $('#laser_cooler_temperature_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#laser_cooler_temperature_img').attr('src','img/control/control-bg-ex.png')
      }

      // 激光烟雾吸尘器工作状态
      let laserSmoke = cleaningStatusStr.cleaningStatus.laserSmokeExtractorStatus
      $('#laser_smoke').html(`<div class="`+ (laserSmoke == 0 ? 'status' : 'exception' )+ `">`+ (laserSmoke == 0 ? '正常' : '异常') + `</div>`)
      if(laserSmoke == 0){
        $('#laser_smoke_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#laser_smoke_img').attr('src','img/control/control-bg-ex.png')
      }

      // 喷墨划线工作状态
      let inkjet_marking_status = cleaningStatusStr.cleaningStatus.inkjetMarkingStatus
      $('#inkjet_marking_status').html(`<div class="`+ (inkjet_marking_status == 0 ? 'status' : 'exception' )+ `">`+ (inkjet_marking_status == 0 ? '正常' : '异常') + `</div>`)
      if(inkjet_marking_status == 0){
        $('#inkjet_marking_status_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#inkjet_marking_status_img').attr('src','img/control/control-bg-ex.png')
      }

      // 板料视觉边轮廓识别装置工作状态
      let board_vision_recognition_status = cleaningStatusStr.cleaningStatus.boardVisionRecognitionStatus
      $('#board_vision_recognition_status').html(`<div class="`+ (board_vision_recognition_status == 0 ? 'status' : 'exception' )+ `">`+ (board_vision_recognition_status == 0 ? '正常' : '异常') + `</div>`)
      if(board_vision_recognition_status == 0){
        $('#board_vision_recognition_status_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#board_vision_recognition_status_img').attr('src','img/control/control-bg-ex.png')
      }

      // 板料视觉边轮廓识别装置是否修正
      let board_vision_correction = cleaningStatusStr.cleaningStatus.boardVisionCorrection
      if(board_vision_recognition_status == 0){
        $('#board_vision_correction').attr('src','img/control/uncheckbox.jpg')
      }else{
        $('#board_vision_correction').attr('src','img/control/checkbox.jpg')
      }

      // 激光清洗板料计数
      let laser_cleaning_count = cleaningStatusStr.cleaningStatus.laserCleaningCount
      $('#laser_cleaning_count').text(laser_cleaning_count)

      // 打磨片使用寿命
      $('#grinding_disc_current_lifetime').text(cleaningStatusStr.cleaningStatus.grindingDiscCurrentLifetime + '/' +  cleaningStatusStr.cleaningStatus.grindingDiscSetLifetime+'M')

      // 湿式除尘器工作状态
      let wet_dust_collector_status = cleaningStatusStr.cleaningStatus.wetDustCollectorStatus
      $('#wet_dust_collector_status').html(`<div class="`+ (wet_dust_collector_status == 0 ? 'status' : 'exception' )+ `">`+ (wet_dust_collector_status == 0 ? '正常' : '异常') + `</div>`)
      if(wet_dust_collector_status == 0){
        $('#wet_dust_collector_status_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#wet_dust_collector_status_img').attr('src','img/control/control-bg-ex.png')
      }

      // 物流线
      let inverter = cleaningStatusStr.cleaningStatus.inverter
      $('#inverter').html(`<div class="`+ (inverter == 0 ? 'status' : 'exception' )+ `">`+ (inverter == 0 ? '正常' : '报警') + `</div>`)
      if(inverter == 0){
        $('#inverter_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#inverter_img').attr('src','img/control/control-bg-ex.png')
      }

      let servo_motor = cleaningStatusStr.cleaningStatus.servoMotor
      $('#servo_motor').html(`<div class="`+ (servo_motor == 0 ? 'status' : 'exception' )+ `">`+ (servo_motor == 0 ? '正常' : '报警') + `</div>`)
      if(servo_motor == 0){
        $('#servo_motor_img').attr('src','img/loading/empty-bg.png')
      }else{
        $('#servo_motor_img').attr('src','img/control/control-bg-ex.png')
      }
    }

    // 摩擦焊工位
    getFrictionWeldingInfo()
    function getFrictionWeldingInfo(){
      let frictionWeldingStatusStr = JSON.parse('{"updateTime":1742808488520,"weldingStatus":{"upperWeldingX":153.9684,"upperWeldingY":153.9684,"upperPosWeldZ":153.9684,"upperFinalWeldZ":153.9684,"upperMillY":153.9684,"upperMillZ":153.9684,"upperWeldFeed":153.9684,"upperMillFeed":153.9684,"upperPosWeldSpindleSpeed":153.9684,"upperPosWeldSpindleTorque":153.9684,"upperFinalWeldSpindleSpeed":153.9684,"upperFinalWeldSpindleTorque":153.9684,"upperMillSpindleSpeed":153.9684,"upperMillSpindleTorque":153.9684,"upperWeldPressureReal":153.9684,"upperWeldPressureSet":153.9684,"upperConstPressureZAdj":153.9684,"upperPosWeldToolLife":76,"upperFinalWeldToolLife":76,"upperMillEdgeToolLife":76,"upperMillSeamToolLife":76,"lowerWeldingX":153.9684,"lowerWeldingY":153.9684,"lowerPosWeldZ":153.9684,"lowerFinalWeldZ":153.9684,"lowerMillX":153.9684,"lowerMillY":153.9684,"lowerMillZ":153.9684,"lowerWeldFeed":153.9684,"lowerMillFeed":153.9684,"lowerPosWeldSpindleSpeed":153.9684,"lowerPosWeldSpindleTorque":153.9684,"lowerFinalWeldSpindleSpeed":153.9684,"lowerFinalWeldSpindleTorque":153.9684,"lowerMillSpindleSpeed":153.9684,"lowerMillSpindleTorque":153.9684,"lowerWeldPressureReal":153.9684,"lowerWeldPressureSet":153.9684,"lowerConstPressureZAdj":153.9684,"lowerPosWeldToolLife":76,"lowerFinalWeldToolLife":76,"lowerMillEdgeToolLife":76,"lowerMillSeamToolLife":76,"laserTrackingOffset":153.9684,"waterCool1Status":76,"waterCool2Status":76,"waterCool3Status":76,"hydraulicTemp":153.9684,"hydraulicLevel":153.9684,"fswPlateCount":76}}')

      $('#upper_pos_weld_tool_life').text(frictionWeldingStatusStr.weldingStatus.upperPosWeldToolLife)
      $('#upper_final_weld_tool_life').text(frictionWeldingStatusStr.weldingStatus.upperFinalWeldToolLife)
      $('#upper_mill_edge_tool_life').text(frictionWeldingStatusStr.weldingStatus.upperMillEdgeToolLife)
      $('#upper_mill_seam_tool_life').text(frictionWeldingStatusStr.weldingStatus.upperMillSeamToolLife)
      $('#lower_pos_weld_tool_life').text(frictionWeldingStatusStr.weldingStatus.lowerPosWeldToolLife)
      $('#lower_final_weld_tool_life').text(frictionWeldingStatusStr.weldingStatus.lowerFinalWeldToolLife)
      $('#lower_mill_edge_tool_life').text(frictionWeldingStatusStr.weldingStatus.lowerMillEdgeToolLife)
      $('#lower_mill_seam_tool_life').text(frictionWeldingStatusStr.weldingStatus.lowerMillSeamToolLife)

      // 水冷机
      let water_cool_1_status = frictionWeldingStatusStr.weldingStatus.waterCool1Status
      let water_cool_2_status = frictionWeldingStatusStr.weldingStatus.waterCool2Status
      let water_cool_3_status = frictionWeldingStatusStr.weldingStatus.waterCool3Status
      let arr = [water_cool_1_status,water_cool_2_status,water_cool_3_status]
      for(let i=0; i<3;i++){
        let currentDiv = `#water_cool_`+(i+1)+ `_status`
        $(currentDiv).html(`<div class="`+ (arr[i] == 0 ? 'status' : 'exception' )+ `">`+ (arr[i] == 0 ? '正常' : '异常') + `</div>`)
        if(arr[i] == 0){
          $(currentDiv + '_img').attr('src','img/loading/empty-bg.png')
        }else{
          $(currentDiv + '_img').attr('src','img/control/control-bg-ex.png')
        }
      }
    
      // 其他
      $('#fsw_plate_count').text(frictionWeldingStatusStr.weldingStatus.fswPlateCount)
      $('#hydraulic_temp').text(frictionWeldingStatusStr.weldingStatus.hydraulicTemp)
      $('#hydraulic_level').text(frictionWeldingStatusStr.weldingStatus.hydraulicLevel)

      $('#lifting_pad_alarm_img').attr('src',frictionWeldingStatusStr.weldingStatus.liftingPadAlarm == 0 ? 'img/loading/empty-bg.png': 'img/control/control-bg-ex.png')
      $('#main_spindle_alarm').attr('src',frictionWeldingStatusStr.weldingStatus.mainSpindleAlarm == 0 ? 'img/loading/empty-bg.png': 'img/control/control-bg-ex.png')
      $('#side_push_alarm').attr('src',frictionWeldingStatusStr.weldingStatus.sidePushAlarm == 0 ? 'img/loading/empty-bg.png': 'img/control/control-bg-ex.png')
      $('#side_positioning_alarm').attr('src',frictionWeldingStatusStr.weldingStatus.sidePositioningAlarm == 0 ? 'img/loading/empty-bg.png': 'img/control/control-bg-ex.png')
    }

    // 检测工位
    getTestInfo()
    function getTestInfo(){
      let testStatusStr = JSON.parse('{"testingStatus":{"xrayMachinePositionUpperY":153.9684,"xrayMachinePositionLowerY":153.9684,"xrayMachinePositionUpperZ":153.9684,"xrayMachinePositionLowerZ":153.9684,"xrayMachineMovingSpeed":153.9684,"imagingBoardMovingSpeed":153.9684,"xrayMachineExternalRadiation":153.9684,"imagingBoardExternalRadiation":153.9684},"updateTime":1742808785890}')
      
      $('#xray_machine_external_radiation').text(testStatusStr.testingStatus.xrayMachineExternalRadiation)
      $('#imaging_board_external_radiation').text(testStatusStr.testingStatus.imagingBoardExternalRadiation)
      $('#xray_machine_position_upper_y').text(testStatusStr.testingStatus.xrayMachinePositionUpperY)
      $('#xray_machine_position_lower_y').text(testStatusStr.testingStatus.xrayMachinePositionLowerY)
      $('#xray_machine_position_upper_z').text(testStatusStr.testingStatus.xrayMachinePositionUpperZ)
      $('#xray_machine_position_lower_z').text(testStatusStr.testingStatus.xrayMachinePositionLowerZ)

      if(testStatusStr.testingStatus.radiationDetectionAlarm == 1){
        $('#radiation_detection_alarm_img').attr('src','img/control/control-bg-ex.png')
        $('#radiation_detection_alarm').text('报警')
      }
    }

    // 下料工位
    getCuttingInfo()
    function getCuttingInfo(){
      let cuttingStatusStr = JSON.parse('{"unloadingStatus":[{"rgvSn":1,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":76,"rgvBatteryStatus":153.9684,"rgvHydraulicStationTemperature":153.9684,"chargingPileStatus":76},{"rgvSn":2,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":76,"rgvBatteryStatus":153.9684,"rgvHydraulicStationTemperature":153.9684,"chargingPileStatus":76},{"rgvSn":3,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":76,"rgvBatteryStatus":153.9684,"rgvHydraulicStationTemperature":153.9684,"chargingPileStatus":76},{"rgvSn":4,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":76,"rgvBatteryStatus":153.9684,"rgvHydraulicStationTemperature":153.9684,"chargingPileStatus":76}],"updateTime":1742808948636}')

      if(cuttingStatusStr.unloadingStatus.length > 0){
        $('#car_num').text(cuttingStatusStr.unloadingStatus[0].currentLinkedCartCount)
      }else{
        $('#car_num').text(0)
      }

      let str = ''
      for(let i=0; i<cuttingStatusStr.unloadingStatus.length;i++){
        let item = cuttingStatusStr.unloadingStatus[i]
        str+= `<div class="table-item">
          <img src="img/control/table-bg.png" class="table-bg"/>
          <div class="control-flex space-between content">
            <div>`+(i+1)+`</div>
            <div class="`+(item.rgvWorkingStatus == 0 ? 'content' : (item.rgvWorkingStatus == 1 ? 'loading' : 'status'))+`">`+(item.rgvWorkingStatus == 0 ? '空载' : (item.rgvWorkingStatus == 1 ? '带载' : '充电'))+`</div>
            <div class="condition">`+(item.chargingPileStatus == 0 ? '正常' : '异常')+`</div>
          </div>
        </div>`
      }
      $('#table-item-wrapper').html(str)
    }

    getAlarmInfo()
    function getAlarmInfo(){
      // 上料报警
      if(loadingAlertStr.loadingAlarms.length>0){
        let alertStr = ''
        for(let i=0; i<loadingAlertStr.loadingAlarms.length;i++){
          let item = loadingAlertStr.loadingAlarms[i]
          let componentText = getAlertComponent(item.component),alarmText = getAlertText(item.alarmType)

          alertStr += `<div class="tip-wrapper-list-item">
            <div style="display: flex; align-items: center;">
              <img src="img/loading/round-icon.png" class="round-icon"/>
              <div>`+ componentText + `-` + alarmText +`</div>
            </div>
            <div style="font-size: 10px;">`+formatDateTime(loadingAlertStr.updateTime)+`</div>
          </div>`

          if(item.alarmType == 0){ $('#alarm_x').css('visibility','visible')}
          if(item.alarmType == 1){ $('#alarm_y').css('visibility','visible')}
          if(item.alarmType == 2){ $('#alarm_z').css('visibility','visible')}
          if(item.alarmType == 3){ $('#vacuum_low_alarm').css('visibility','visible')}
          if(item.alarmType == 4){ $('#sucker_alarm').css('visibility','visible')}
        }
        $('#loadingAlert-wrapper').html(alertStr)
      }else{
        $('#alarm_x').css('visibility','hidden')
        $('#alarm_y').css('visibility','hidden')
        $('#alarm_z').css('visibility','hidden')
        $('#vacuum_low_alarm').css('visibility','hidden')
        $('#sucker_alarm').css('visibility','hidden')
      }

      // 清洗报警
      if(cleaningAlertStr.loadingAlarms.length > 0){
        let cleaningStr = '',inverter_num = 0,servo_motor_num = 0
        for(let i=0; i< cleaningAlertStr.loadingAlarms.length; i++){
          let item = cleaningAlertStr.loadingAlarms[i]
          let componentAlert = getCleaningAlertComponent(item.alarmType),alarmText = componentAlert.value
          cleaningStr += `<div class="tip-wrapper-list-item">
            <div style="display: flex; align-items: center;">
              <img src="img/loading/round-icon.png" class="round-icon"/>
              <div>`+ componentAlert.label + `-` + alarmText +`</div>
            </div>
            <div style="font-size: 1rem;">`+formatDateTime(cleaningAlertStr.updateTime)+`</div>
          </div>`

          if(item.alarmType == 0 || item.alarmType == 1 || item.alarmType == 2){ $('#laser').css('visibility','visible')}
          if(item.alarmType == 3 || item.alarmType == 4){ $('#dust').css('visibility','visible')}

          if(item.inverter == 1){
            inverter_num ++ 
          }
          if(item.servo_motor == 1){
            servo_motor_num ++ 
          }
        }
        if(inverter_num > 0) {
          $('#inverter').css('visibility','visible')
          $('#inverter_num').text(inverter_num)
        }else{
          $('#inverter').css('visibility','hidden')
        }

        if(servo_motor_num > 0) {
          $('#servo_motor').css('visibility','visible')
          $('#servo_motor_num').text(servo_motor_num)
        }else{
          $('#servo_motor').css('visibility','hidden')
        }

        $('#cleaningAlert-wrapper').html(cleaningStr)
      }else{
        $('#laser').css('visibility','hidden')
        $('#dust').css('visibility','hidden')
        $('#inverter').css('visibility','hidden')
        $('#servo_motor').css('visibility','hidden')
      }

      // 摩擦焊报警
      if(frictionWeldingAlertStr.weldingAlarms.length > 0){
        let frictionWeldingStr = '',
        press_plate_alarm_num = 0,
        logistics_line_status_num = 0,
        side_positioning_alarm_num = 0,
        main_spindle_alarm_num = 0,
        tool_change_alarm_num = 0,
        side_push_alarm_num = 0,
        servo_cart_alarm_num = 0,
        lifting_pad_alarm_num = 0
        for(let i=0; i< frictionWeldingAlertStr.weldingAlarms.length; i++){
          let item = frictionWeldingAlertStr.weldingAlarms[i]
          let componentAlert = 'FSW',alarmText = getFrictionWeldingAlertComponent(item.alarmType)
          frictionWeldingStr += `<div class="tip-wrapper-list-item">
            <div style="display: flex; align-items: center;">
              <img src="img/loading/round-icon.png" class="round-icon"/>
              <div>`+ componentAlert+ `-` + item.deviceSn + '号'+alarmText +`</div>
            </div>
            <div style="font-size: 1rem;">`+formatDateTime(frictionWeldingAlertStr.updateTime)+`</div>
          </div>`

          if(item.alarmType == 2){
            press_plate_alarm_num++
          }

          if(item.logisticsLineStatus == 1){
            logistics_line_status_num++
          }

          if(item.hsLiquidLevellAlarm== 1){
            $('#hs_liquid_levell_alarm').css('visibility','visible')
          }else{
            $('#hs_liquid_levell_alarm').css('visibility','hidden')
          }

          if(item.sidePositioningAlarm == 1){
            side_positioning_alarm_num++
          }

          if(item.mainSpindleAlarm == 1){
            main_spindle_alarm_num++
          }

          if(item.toolCoolerAlarm){
            $('#tool_cooler_alarm').css('visibility','visible')
          }else{
            $('#tool_cooler_alarm').css('visibility','hidden')
          }

          if(item.toolChangeAlarm == 1){
            tool_change_alarm_num++
          }

          if(item.spindleCoolerAlarm == 1){
            $('#spindle_cooler_alarm').css('visibility','visible')
          }else{
            $('#spindle_cooler_alarm').css('visibility','hidden')
          }

          if(item.hsTemperatureAlarm == 1){
            $('#hs_temperature_alarm').css('visibility','visible')
          }else{
            $('#hs_temperature_alarm').css('visibility','hidden')
          }

          if(item.sidePushAlarm == 1){
            side_push_alarm_num++
          }

          if(item.servoCartAlarm == 1){
            servo_cart_alarm_num++
          }

          if(item.liftingPadAlarm == 1){
            lifting_pad_alarm_num++
          }

          if(item.cncAlarm == 1){
            $('#cnc_alarm').css('visibility','visible')
          }else{
            $('#cnc_alarm').css('visibility','hidden')
          }
        }
        if(press_plate_alarm_num > 0){
          $('#press_plate_alarm').css('visibility','visible')
          $('#press_plate_alarm_num').text(press_plate_alarm_num)
        }else{
          $('#press_plate_alarm').css('visibility','hidden')
        }

        if(logistics_line_status_num > 0){
          $('#logistics_line_status').css('visibility','visible')
          $('#logistics_line_status_num').text(logistics_line_status_num)
        }else{
          $('#logistics_line_status').css('visibility','hidden')
        }

        if(side_positioning_alarm_num > 0){
          $('#side_positioning_alarm').css('visibility','visible')
          $('#side_positioning_alarm_num').text(side_positioning_alarm_num)
        }else{
          $('#side_positioning_alarm').css('visibility','hidden')
        }

        if(main_spindle_alarm_num > 0){
          $('#main_spindle_alarm').css('visibility','visible')
          $('#main_spindle_alarm_num').text(main_spindle_alarm_num)
        }else{
          $('#main_spindle_alarm').css('visibility','hidden')
        }

        if(tool_change_alarm_num> 0){
          $('#tool_change_alarm').css('visibility','visible')
          $('#tool_change_alarm_num').text(tool_change_alarm_num)
        }else{
          $('#tool_change_alarm').css('visibility','hidden')
        }

        if(side_push_alarm_num>0){
          $('#side_push_alarm').css('visibility','visible')
          $('#side_push_alarm_num').text(side_push_alarm_num)
        }else{
          $('#side_push_alarm').css('visibility','hidden')
        }

        if(servo_cart_alarm_num>0){
          $('#servo_cart_alarm').css('visibility','visible')
          $('#servo_cart_alarm_num').text(servo_cart_alarm_num)
        }else{
          $('#servo_cart_alarm').css('visibility','hidden')
        }

        if(lifting_pad_alarm_num > 0){
          $('#lifting_pad_alarm').css('visibility','visible')
          $('#lifting_pad_alarm_num').text(lifting_pad_alarm_num)
        }else{
          $('#lifting_pad_alarm').css('visibility','hidden')
        }

        $('#frictionAlert-wrapper').html(frictionWeldingStr)
      }else{
        $('#hs_liquid_levell_alarm').css('visibility','hidden')
        $('#tool_cooler_alarm').css('visibility','hidden')
        $('#spindle_cooler_alarm').css('visibility','hidden')
        $('#hs_temperature_alarm').css('visibility','hidden')
        $('#cnc_alarm').css('visibility','hidden')
        $('#press_plate_alarm').css('visibility','hidden')
        $('#logistics_line_status').css('visibility','hidden')
        $('#side_positioning_alarm').css('visibility','hidden')
        $('#main_spindle_alarm').css('visibility','hidden')
        $('#tool_change_alarm').css('visibility','hidden')
        $('#side_push_alarm').css('visibility','hidden')
        $('#servo_cart_alarm').css('visibility','hidden')
        $('#lifting_pad_alarm').css('visibility','hidden')
      }

      // 检测报警
      if(testAlertStr.testingAlarms.length > 0){
        $('#testAlert-wrapper').html(`<div class="tip-wrapper-list-item">
          <div style="display: flex; align-items: center;">
            <img src="img/loading/round-icon.png" class="round-icon"/>
            <div>射线检测-射线检测报警信息</div>
          </div>
          <div style="font-size: 1rem;">`+formatDateTime(testAlertStr.updateTime)+`</div>
        </div>`)
        $('#test-wrapper').css('visibility','visible')
      }else{
        $('#test-wrapper').css('visibility','hidden')
      }

      // 下料报警
      if(cuttingAlertStr.unloadingAlarms.length > 0){
        let cuttingStr = '',
        rgv_low_liquid_level_alarm_no = []
        for(let i=0; i< cuttingAlertStr.unloadingAlarms.length; i++){
          let item = cuttingAlertStr.unloadingAlarms[i]
          let componentAlert = 'RVG小车',
          alarmText = getCuttingAlertComponent(item.alarmType)
          cuttingStr += `<div class="tip-wrapper-list-item">
            <div style="display: flex; align-items: center;">
              <img src="img/loading/round-icon.png" class="round-icon"/>
              <div>`+ componentAlert+ `-` + item.deviceSn + '号'+alarmText +`</div>
            </div>
            <div style="font-size: 1rem;">`+formatDateTime(frictionWeldingAlertStr.updateTime)+`</div>
          </div>`

          if(item.rgvLowLiquidLevelAlarm == 1){
            rgv_low_liquid_level_alarm_no.push(item.deviceSn)
          }

          if(item.emergencyStopInfo == 1){
            $('#emergency_stop_info').css('visibility','visible')
            $('#cutting_emergency_stop_info_img').attr('src','img/control/control-bg-ex.png')
            $('#cutting_emergency_stop_info').html('<div class="exception">报警</div>')
          }else{
            $('#emergency_stop_info').css('visibility','hidden')
            $('#cutting_emergency_stop_info_img').attr('src','img/loading/empty-bg.png')
            $('#cutting_emergency_stop_info').html('<div class="status">正常</div>')
          }

          if(item.rgvObstacleAvoidanceAlarm == 1){
            $('#rgv_obstacle_avoidance_alarm').css('visibility','visible')
          }else{
            $('#rgv_obstacle_avoidance_alarm').css('visibility','hidden')
          }

          if(item.chargingPileAlarm == 1){
            $('#charging_pile_alarm').css('visibility','visible')
          }else{
            $('#charging_pile_alarm').css('visibility','hidden')
          }

          if(item.rgvAlarmInfo == 1){
            $('#rgv_alarm_info').css('visibility','visible')
          }else{
            $('#rgv_alarm_info').css('visibility','hidden')
          }

        }
        
        // 小车液压报警
        if(rgv_low_liquid_level_alarm_no.length > 0){
          $('#rgv_low_liquid_level_alarm').css('visibility','visible')
          $('#rgv_low_liquid_level_alarm_no').text(rgv_low_liquid_level_alarm_no.join(','))
          $('#cutting_rgv_low_liquid_level_alarm_img').attr('src','img/control/control-bg-ex.png')
          $('#cutting_rgv_low_liquid_level_alarm').html(`<div class="exception">报警</div>`)
        }else{
          $('#rgv_low_liquid_level_alarm').css('visibility','hidden')
          $('#cutting_rgv_low_liquid_level_alarm_img').attr('src','img/loading/empty-bg.png')
          $('#cutting_rgv_low_liquid_level_alarm').html(`<div class="status">正常</div>`)
        }

        $('#cuttingAlert-wrapper').html(cuttingStr)
      }else{
        $('#emergency_stop_info').css('visibility','hidden')
        $('#rgv_obstacle_avoidance_alarm').css('visibility','hidden')
        $('#charging_pile_alarm').css('visibility','hidden')
        $('#rgv_alarm_info').css('visibility','hidden')
        $('#rgv_low_liquid_level_alarm').css('visibility','hidden')
      }
    }

    function getCuttingAlertComponent(type){
      switch(type){
        case 1: return '低液位报警'; break;
        case 2: return '避障报警'; break;
        case 3: return '报警信息'; break;
        case 4: return '急停信息'; break;
        case 5: return '充电桩报警'; break;
      }
    }

    function getFrictionWeldingAlertComponent(type){
      switch(type){
        case 0: return '主轴水冷机异常报警'; break;
        case 1: return '刀具水冷机异常报警'; break;
        case 2: return '压板报警'; break;
        case 3: return '升降垫板报警'; break;
        case 4: return '小车报警'; break;
        case 5: return '侧向定位报警'; break;
        case 6: return '侧推报警'; break;
        case 7: return '换刀报警'; break;
        case 8: return '主机轴报警'; break;
        case 9: return '液压站温度异常报警'; break;
        case 10: return '液压站液位异常报警'; break;
        case 11: return '数控系统报警'; break;
      }
    }

    function getCleaningAlertComponent(type){
      switch(type){
        case 0: return {
          label: '喷墨划线',
          value: '激光器功率异常报警'
        }; break;
        case 1: return {
          label: '喷墨划线',
          value: '激光水冷器温度异常报警'
        }; break;
        case 2: return {
          label: '喷墨划线',
          value: '激光烟雾吸尘器报警信息'
        }; break;
        case 3: return {
          label: '浮动打磨',
          value: '打磨片库存低报警'
        }; break;
        case 4: return {
          label: '浮动打磨',
          value: '湿式除尘器报警信息'
        }; break;
      }
    }

    function getAlertComponent(type){
      switch(type){
        case 0: return '龙门吊'; break;
        case 1: return '真空吸盘'; break;
      }
    }

    function getAlertText(type){
      switch(type){
        case 0: return 'x轴异常报警'; break;
        case 1: return 'y轴异常报警'; break;
        case 2: return 'z轴异常报警'; break;
        case 3: return '真空度低报警'; break;
        case 4: return '吸盘工作异常报警'; break;
      }
    }

    function formatDateTime(updateTime) {
      var date = new Date(updateTime);
      var formatted = date.getFullYear() + '-' +
        String(date.getMonth() + 1).padStart(2, '0') + '-' +
        String(date.getDate()).padStart(2, '0') + ' ' +
        String(date.getHours()).padStart(2, '0') + ':' +
        String(date.getMinutes()).padStart(2, '0') + ':' +
        String(date.getSeconds()).padStart(2, '0');
      return formatted;
    }
  </script>
  <style>
    @keyframes blink {
      0% {
        opacity: 0.3;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.3;
      }
    }
    .right-container{
      position: relative;
      padding-left: 10px;
      height: 43.3rem;
    }
    .right-container .box-container{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 33.3rem;
      background-color: transparent;
    }
    .right-container .box-container .box-item{
      height: 2.3rem;
      margin-bottom: 5px;
    }
    .table-wrapper .table-item .content .loading{
      color: #DC5D0B;
    }

    .table-wrapper .table-item .content .condition{
      color: #43E8CE;
    }
    .table-wrapper .table-item .content .status{
      color: #69D9FE;
    }
    .table-wrapper .table-item .content{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
    .table-wrapper .table-item{
      width: 100%;
      height: 3.4rem;
      line-height: 3.4rem;
      position: relative;
      margin:3px 0;
    }
    .table-wrapper .control-flex>div{
      width: 33%;
      text-align: center;
    }
    .table-wrapper{
      margin-top: 10px;
      width: 100%;
      text-align: center; 
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 1.2rem;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
    }

    .xialiao-desc{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 1.6rem;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
    }

    .test .total-num{
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 2.4rem;
      color: #FFEDA8;
      text-align: left;
      font-style: normal;
      margin-top: 0.1rem;
      margin-left: 2rem;
    }
    .test .test-speed{
      height: 3rem;
      font-size: 1rem;
      padding-left: 1rem;
      line-height: 3rem;
      background: linear-gradient( 270deg, rgba(55,108,186,0.4) 0%, rgba(55, 108, 186, 0.4) 100%);
      border-radius: 6px 6px 6px 100px;
    }
    .test .num{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 2.6rem;
      color: #FA6400;
      text-align: left;
      font-style: normal;
      padding-left: 1rem;
    }
    .test{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 1.6rem;
      color: #F6FDFF;
      text-align: left;
      font-style: normal;
    }
    .temperatrue .num{
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 1.2rem;
      color: #45EED1;
      text-align: left;
      font-style: normal;
    }
    .temperatrue{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 1.3rem;
      color: #F6FDFF;
      text-align: left;
      font-style: normal;
    }
    .desc-item{
      width: 100%;
      height: 4.2rem;
      line-height: 4.2rem;
      background: rgba(36,121,245,0.1);
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 1.2rem;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      margin-bottom: 10px;
      padding: 0 1rem;
    }
    .usage-container .usaged{
      width: 80%;
      height: 2rem;
      background: linear-gradient( 270deg, #7CB2FF 0%, #2E79CF 100%);
    }
    .usage-wrapper{
      margin-top: 1rem;
    }
    .usage-wrapper .usage-container{
      width: 20.5rem;
      height: 3.1rem;
      padding: 0.5rem 0.25rem;
      box-sizing: border-box;
      border-radius: 0.3rem;
      border: 0.1rem solid rgba(80, 154, 255, 0.3);
      margin-right: 0.8rem;
    }
    .common{
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 1.6rem;
      color: #FFFFFF;
      text-align: left;
      align-items: center;
      font-style: normal;
    }
    .exception{
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 1.2rem;
      color: #FA6400;
      text-align: left;
      font-style: normal;
    }
    .control-bottom-left-container .header-title{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 2rem;
      color: #32D9FF;
      text-align: left;
      font-style: normal;
      margin-left: 2rem;
    }
    .control-bottom-left-container{
      width: 100%;
      border: 0.1rem solid rgba(102, 230, 255, 0.25);
      box-sizing: border-box;
      padding: 1.2rem;
    }
    .control-bottom{
      width: 100%;
    }
    .control-loading-status .desc .status{
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 1.2rem;
      color: #43E8CE;
      text-align: left;
      font-style: normal;
    }
    .control-loading-status .desc{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      line-height: 4.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 1.2rem;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      padding: 0 2.2rem;
    }
    .control-loading-status{
      position: relative;
      margin-bottom: 0.5rem;
    }
    .control-header-num{
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 2.6rem;
      color: #45EED1;
      text-align: left;
      font-style: normal;
    }
    .control-header-left-content{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 1.6rem;
      color: #F6FDFF;
      text-align: left;
      font-style: normal;
    }
    .control-flex{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .control-header-left-content{
      width: 100%;
      box-sizing: border-box;
      padding: 1rem;
      border: .1rem solid #66E6FF;
      border-color: rgba(102, 230, 255, 0.25);
    }
    .control-title{
      width: 100%;
      height: 3.8rem;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 2.8rem;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      position: relative;
      margin-bottom: 1rem;
    }

    .control-title .control-title-bg{
      width: 100%;
      height: 100%;
    }

    .control-title .control-title-desc{
      position: absolute;
      left: 5.3rem;
      top: 0;
    }
    .tip-wrapper{
      position: relative;
    }

    .tip-wrapper-list{
      position: absolute;
      right: 0;
      top: 0;
      width: 36.4rem;
      max-height: 90vh;
      overflow-y: auto;
      background: #FFFFFF;
      border-radius: 0.4rem;
      z-index: 100;
      padding: 1.8rem;
    }
    .tip-wrapper-list-item{
      width: 32.8rem;
      height: 3.1rem;
      line-height: 3.1rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 99, 16, 0.05);
      padding: 0 0.5rem;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 1.2rem;
      color: #00173A;
      text-align: left;
      font-style: normal;
      margin-bottom:1rem;
    }
    .tip-wrapper-list-item .round-icon{
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-size:62.5%;
    }
    .app-container {
      width: 100%;
      height: 100%;
      position: relative;
    }
    
    .app-container .bg-img {
      min-height: 100rem;
    }
    
    .app-container .monitor-wrapper {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      padding: 2rem;
      display: flex;
      align-items: flex-start;
    }

    .monitor-wrapper-left,.monitor-wrapper-right{
      position: relative;
    }

    .monitor-wrapper-left-wrapper{
      width: 80%;
    }
    .monitor-wrapper-right-wrapper{
      width: 20%;
      position: relative;
    }
    .monitor-wrapper-left,.monitor-wrapper-right{
      width: 100%;
    }
    .space-between{
      justify-content: space-between;
    }
    img{
      width:100%;
      height: 100%;
    }
    .structure .alert-wrapper {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      visibility: hidden;
    }

    .structure .clean-alert-wrapper{
      position: relative;
      margin: 1rem;
      height:7.2rem;
    }

    .structure .clean-alert-wrapper-desc{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 1.3rem;
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
      padding-top: 1rem;
    }

    .structure .clean-alert-wrapper-desc .desc{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 1.5rem;
      color: #FA6400;
      font-style: normal;
    }
    
    .structure .alert-wrapper .clean_alert {
      margin-top: 5px;
      width: 4.8rem;
      height: 4.8rem;
      animation: blink 1.5s linear infinite;
    }
    .structure{
      width :100%;
      height: 100%;
    }
  </style>
</body>
</html>